<template>
  <div class="box">
    <template v-for="item in store.friends" :key="item.id">
      <div class="box-item">
        <el-row>
          <el-col :span="2">
            <el-avatar
              class="box-avatar"
              shape="square"
              :size="100"
              fit="cover"
              :src="item.avatar"
            />
          </el-col>
          <el-col :span="20"> {{ item.nickName }}</el-col>
          <el-col :span="2">
            <el-checkbox v-model="item.isTrue" size="large"
          /></el-col>
        </el-row>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { useMainStore } from "@/store/main";
const store = useMainStore();
</script>

<style scoped>
.box {
  width: 100%;
  padding: 10px;
}

.box-item {
  height: 70px;
  padding: 10px;
  line-height: 70px;
}
.box-avatar {
  width: 70px;
  height: 70px;
}
</style>
